/*===========================================================================
  CONTROLS

  The standard Monocle stylesheet for the optional Monocle controls. See
  comments for monocore.css, which apply here too.
---------------------------------------------------------------------------*/

/* Contents */

div.monelem_controls_contents_container {
  position: absolute;
  width: 75%;
  height: 75%;
  left: 12.5%;
  top: 12.5%;
  background: #EEE;
  border: 2px solid #F7F7F7;
  border-radius: 9px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
  -moz-box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
}

ol.monelem_controls_contents_list {
  margin: 6px;
  padding: 0;
}

li.monelem_controls_contents_chapter {
  list-style: none;
  line-height: 220%;
  padding-left: 1em;
  padding-right: 2em;
  border-bottom: 2px groove #FEFEFE;
  cursor: pointer;
}

li.monelem_controls_contents_chapter_active {
  background: #999;
  color: white;
}

/* Magnifier */

.monelem_controls_magnifier_button {
  cursor: pointer;
  color: #555;
  position: absolute;
  top: 2px;
  right: 10px;
  padding: 0 2px;
}

.monelem_controls_magnifier_a {
  font-size: 11px;
}

.monelem_controls_magnifier_A {
  font-size: 18px;
  opacity: 0.3;
}


/* Spinner */

.monelem_controls_spinner_anim {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center center;
}


/* Scrubber */

div.monelem_controls_scrubber_container {
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 4px;
  height: 30px;
  background: rgba(255,255,255,0.8);
}

div.monelem_controls_scrubber_track {
  margin-top: 10px;
  height: 5px;
  border: 1px solid #999;
  cursor: pointer;
}

div.monelem_controls_scrubber_needle {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 5px;
  background: #CCC;
  border: 1px solid #999;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

div.monelem_controls_scrubber_trail {
  position: absolute;
  background: #DDD;
  top: 11px;
  left: 1px;
  height: 5px;
}

div.monelem_controls_scrubber_bubble {
  display: none;
  position: absolute;
  padding: 1em;
  min-width: 20%;
  max-width: 30%;
  bottom: 2.5em;
  background: rgba(0, 0, 0, 0.9);
  color: #CCC;
  font: bold 12px Lucida Grande, Tahoma, Helvetica, Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}


/* Stencil */
div.monelem_controls_stencil_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

a.monelem_controls_stencil_cutout {
  display: block;
  position: absolute;
}

div.monelem_controls_stencil_highlighted a {
  background: rgba(0,0,255,0.15);
}


/*===========================================================================
  DATA URIs

  These are data-uri packed images, inlined for loading speed and simplicity.
  Placed at the end of this file because they're visually noisy...
---------------------------------------------------------------------------*/

div.monelem_controls_spinner_anim {
  background-image: url();
}
